<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      screenHeight: document.body.clientHeight
    }
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        const that = this
        this.$store.dispatch('windowH/get_height', val)
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.timer = false
        }, 400)
      }
    }
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight
        that.screenHeight = window.screenHeight
        this.$store.dispatch('windowH/get_height', that.screenHeight).then(() => {
          // console.log('触发')
          // console.log(that.$store.state.screenHeight.height)
        }).catch(() => {
          // console.log('没触发')
        })
      })()
    }
  }
}
</script>

<style lang="scss">
.top_o ::v-deep .el-tabs__header {
  margin: 0px !important;
}
.box ::v-deep .el-drawer__header{
  margin-bottom: 0px !important;
}
::v-deep label::after{
  content: ":";
  position: absolute;
}
.label ::v-deep label::after{
  content: ":";
  position: absolute;
}
::v-deep .display label::after{
  display: none;
}
::v-deep .el-timeline{
  position: relative !important;
  width: 65% !important;
  margin: 3% auto 0px !important;
}
::v-deep .el-card {
  background:#f8f8f8 !important;
}

.flex{
  display: flex;
  padding:10px 0px;
  justify-content:flex-start;
}
.flex_between{
  padding:10px 0px;
  display: flex;
  justify-content: space-between;
}
.flex_evenly{
      padding: 10px 0px;
    display: flex;
    justify-content: space-evenly;
}
.redText{
  color: red;
  font-size: 110%;
}
.box ::v-deep .vxe-icon--edit-outline{
  display: none;
}
</style>

<style>
.Information {
  position: absolute;
  z-index: 99999999;
  bottom: 0px;
  width: 100%;
  background-color: #fff;
  padding: 5px 0px;
  display: flex;
  justify-content: space-evenly;
}
.BtnAll {
  position: absolute;
  right: 20px;
  top: 20px;
}
/*修改滚动条样式*/
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  /**/
}
*::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}
*::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
/*修改滚动条样式*/
#app >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  /* height: 10px; */
  /**/
}
#app >>> .el-table__body-wrapper::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
}
#app >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.space-between {
  display: flex;
  /* justify-content: flex-start; */
  align-items: baseline;
  justify-content: space-between;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}
.aside{
  position: relative;
}
.addBtn {
  width: 100%;
  text-align: center;
  bottom: -50px;
  position: absolute;
}
.bottom{
  position: absolute;
  bottom: 0px;
}
</style>
